<template>
  <!-- 人员弹窗 -->
  <a-modal centered :title="title" :visible.sync="dialogVisible" width="1200px" @cancel="handleCancel" @ok="handleOk"
  >
    <searchData :searchData="searchArr" @search="search" ref="searchData"></searchData>
    <div class="flex-row">
      <span>已选:{{ selectedRowKeys.length }}</span>
      <span> <a @click="selected(false)">全部</a> <a-divider type="vertical" /> <a @click="selected(true)">只看已选</a></span>
    </div>

    <s-table
      v-if="dialogVisible"
      ref="tableS"
      :scroll="{ y: 300 }"
      table-layout="fixed"
      size="default"
      :row-key="(row) => row[keyId]"
      :columns="columns"
      :row-selection="rowSelection"
      :data="loadData"
      show-size-changer
      show-quick-jumper
      :show-pagination="false"
    ></s-table>
  </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格
import { getDrawDetailList } from '@/api/technical/designFM'
import Selector from '@/components/Select/Selector'
import { majorTypeSelectListTree } from '@/api/technology'
const searchArr = [
  // {
  //   name: '专业类别',
  //   value: 'projectLocation2',
  //   type: Selector
  // },
  {
    name: '工程部位',
    type: 'tree-select',
    value: 'majorTypeId',
    attrs: {
      replaceFields: {children:'children', title:'majorName', key:'id', value: 'id' },
      showSearch: true,
      treeNodeFilterProp: 'title'
    },
    data: []
  },
  // {
  //   name: '工程部位',
  //   value: 'projectLocation',
  //   type: 'input'
  // },
  {
    name: '图纸名称',
    value: 'name',
    type: 'input'
  },
  {
    name: '图号',
    value: 'drawNum',
    type: 'input'
  }
]
const columns = [

  {
    title: '工程部位',
    dataIndex: 'projectLocation'
  },
  {
    title: '专业类别',
    dataIndex: 'majorTypeName'
  },
  // {
  //   title: '专业类型',
  //   dataIndex: 'drawTypeName'
  // },
  {
    title: '图纸名称',
    dataIndex: 'name'
  },
  {
    title: '图号',
    dataIndex: 'drawNum'
  }
]
export default {
  components: {
    STable
  },

  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    title: {
      type: String,
      default: '图纸清单'
    },
    //选中唯一id
    keyId: {
      type: String,
      default: 'drawId'
    },

    // 表单
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    //表单数组字段
    listKey: {
      type: String,
      default: 'detailDTOS'
    },
    searchArr: {
      type: Array,
      default() {
        return searchArr
      }
    },
    columns: {
      type: Array,
      default() {
        return columns
      }
    },
    //表格请求api
    api: {
      type: [Object, Function],
      default: () => getDrawDetailList
    },
    //请求参数是否包含在query里面
    isQuery: {
      type: Boolean,
      default() {
        return false
      }
    },
    status: {
      type: [Boolean, String, Number],
      default() {
        return 'PAST'
      }
    }
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        }
      }
    }
  },
  data() {
    let that = this
    return {
      queryParam: { status: 'PAST' },
      selectedRowKeys: [],
      // 表格复选框配置
      loadData: (parameter) => {
        if (!this.queryParam.projectId) return
        this.queryParam.status = this.status
        // delete  this.queryParam.status
        this.queryParam.drawingTypeId = this.form.drawTypeId
        this.queryParam.majorTypeId = this.form.majorTypeId || this.form.professionalTypeId
        const requestParameters = Object.assign({ needCount: false }, parameter, this.isQuery ? { query: this.queryParam } : this.queryParam)
        return this.api(requestParameters).then((res) => {
          if (this.select) {
          const arr = res.data.filter(item => that.selectedRowKeys.includes(item[that.keyId]))
            res.data = arr
          }
          return res
        })
      },

      selectOptions: {},
      select: false
    }
  },
  methods: {
    selected(select) {
      this.select = select
      this.$refs.tableS.refresh(true)
    },
    //搜索
    search(value) {
      this.queryParam = {
        status: 'PAST'
      }
      this.queryParam.projectId = this.form.projectId
      this.queryParam.branchComId = this.form.branchComId
      value && (this.queryParam = { ...this.queryParam, ...value })
      this.$refs.tableS.refresh(true)
    },
    handleOk() {
      this.form[this.listKey] = []
      this.selectedRows?.forEach((item) => {
        // if (!item.isAdd) {
        //   item.isAdd = true
          this.form[this.listKey].push(item)
        // }
      })

      this.$emit('confirm')
      this.dialogVisible = false
    },
    handleCancel() {
      this.dialogVisible = false
    }
  },
  watch: {
    visible:{
      immediate: true,
      handler(e) {
        if (e) {
          this.$nextTick(() => {
            // this.rowSelection.selectedRows = []
            this.queryParam.projectId = this.form.projectId
            this.queryParam.branchComId = this.form.branchComId
            this.selectedRowKeys = []
            if( this.form[this.listKey]?.length) {
              this.form[this.listKey].forEach(item=>{
                this.selectedRowKeys.push(item[this.keyId])
              })
              this.selectedRows = this.form[this.listKey]
            }
            setTimeout(()=>{
              this.$refs.tableS.refresh(true)
            }, 10)

          })
        } else {
          this.params = {}
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}
  /deep/ .ant-select-tree {
    text-align: left!important;
  }
</style>
